<template>
	<div class="container-page video-player">
		<video-player class="video-player-box" ref="videoPlayer" :options="playerOptions"></video-player>
	</div>
</template>

<script>
	import 'video.js/dist/video-js.css'
	import {
		videoPlayer
	} from 'vue-video-player'
	export default {
		components: {
			videoPlayer
		},
		data() {
			return {
				playerOptions: {
					// videojs options
					height: '360',
					// muted: true,
					// language: 'en',
					// playbackRates: [0.7, 1.0, 1.5, 2.0],
					// sources: [{
					// 	type: "video/mp4",
					// 	src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
					// }],
					sources: [{
						withCredentials: true,
						type: 'application/x-mpegURL',
						src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',	  
					}],
					// poster: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-player {
		display: flex;
		justify-content: flex-start;
		background: #235;
	}

	.video-player-box {
		background: #000;
	}
</style>
